Ext.define("BioGene.view.GeneView", {
	extend: "Ext.tab.Panel",
	alias: "widget.geneview",
	
	requires: [
        'Ext.tab.Panel'
    ],
	
	config: {
	    fullscreen: true,
	    tabBar: {
	    	layout: {
	    		pack: 'center',
	    		align: 'center'
	    	},
	    	docked: 'bottom'
	    }
	},
	
    initialize: function () {
    
    	this.callParent(arguments);
        
        this.refPaging = new Array();
    	this.rifArray = new Array();
        
        // Button for returning to search listing
        var backButton = new Ext.Button({
    		text: 'Results',
    		ui: 'back',
    		id: 'backButton',
    		hidden: true,
    		handler: this.backToSearch
    	});
    	
    	// Button for returning to search index
    	var searchButton = new Ext.Button({
    		text: 'Search',
    		ui: 'back',
    		id: 'searchButton',
    		hidden: true,
    		handler: this.backToIndex
    	});
    	
    	var fontUpButton = new Ext.Button({
    		id: 'fontUp',
            iconCls: 'font_up',
        	iconMask: true,
        	handler: this.fontUp,
    	});
    	
    	var fontDownButton = new Ext.Button({
    		id: 'fontDown',
            iconCls: 'font_down',
        	iconMask: true,
        	handler: this.fontDown
    	});

		// Top toolbar
        var topToolbar = new Ext.Toolbar({
            title: 'Gene Display',
            docked: 'top',
            id: 'geneViewToolbar',
            items: [
            	backButton,
            	searchButton,
            	{ xtype: 'spacer' },
            	fontDownButton,
            	fontUpButton
            ]
        });
        
        var nextButton = new Ext.Button({
    		iconCls: 'arrow_right',
            iconMask: true,
    		id: 'nextButton',
    		hidden: true,
    		handler: function () {
            	//Calculate paging stuff
            	BioGene.view.GeneView.refPaging.page = BioGene.view.GeneView.refPaging.page + 1;
            	BioGene.view.GeneView.refPaging.start = ((BioGene.view.GeneView.refPaging.page * getCookie("bg_references")) - getCookie("bg_references"))+1;
            	BioGene.view.GeneView.refPaging.end = BioGene.view.GeneView.refPaging.page * getCookie("bg_references");
            	if (BioGene.view.GeneView.refPaging.end > BioGene.view.GeneView.rifArray.length) {
            		BioGene.view.GeneView.refPaging.end = BioGene.view.GeneView.rifArray.length;
            	}
				
        		this.fireEvent("activateRifPaging", this);
    		}
        });
        
        var prevButton = new Ext.Button({
    		iconCls: 'arrow_left',
            iconMask: true,
    		id: 'prevButton',
    		hidden: true,
    		handler: function () {
            	//Calculate paging stuff
            	BioGene.view.GeneView.refPaging.page = BioGene.view.GeneView.refPaging.page - 1;
            	BioGene.view.GeneView.refPaging.start = ((BioGene.view.GeneView.refPaging.page * getCookie("bg_references")) - getCookie("bg_references"))+1;
            	BioGene.view.GeneView.refPaging.end = BioGene.view.GeneView.refPaging.page * getCookie("bg_references");
            	if (BioGene.view.GeneView.refPaging.end > BioGene.view.GeneView.rifArray.length) {
            		BioGene.view.GeneView.refPaging.end = BioGene.view.GeneView.rifArray.length;
            	}
            	
            	this.fireEvent("activateRifPaging", this);
    		}
        });
        
        var pagingBar = new Ext.Toolbar({
        	title: '',
        	docked: 'top',
        	id: 'pagingBar',
        	ui: 'neutral',
        	hidden: true,
        	items: [
            	prevButton,
            	{ xtype: 'spacer' },
				nextButton
            ]
        });
        
        var geneTab = {
        	title: 'Gene',
        	xtype: 'panel',
        	id: 'geneTab',
        	iconCls: 'gene',
        	cls: 'fontAdjust',
        	iconMask: true,
        	scrollable: true,
        	styleHtmlContent: true,
        	data: {},
        	tpl: new Ext.XTemplate(
                        '<b>Official Symbol:</b> {gene_symbol}<br />',
                        '<b>Name:</b> {gene_description}<br />',
                        '{[this.ins_aliases(values.gene_aliases)]}',
                        '<b>Organism:</b> {gene_organism}<br />',
                        '{[this.ins_comma(values.gene_designations)]}',
                        '<b>Chromosome:</b> {gene_chromosome}<br />',
                        '<b>Location:</b> {gene_location}<br />',
                        '{[this.check_mim(values.gene_mim)]}',
                        '<b>GeneID:</b> {gene_id}',
                        {
                        	ins_comma: function(value) {
                        		if (!value)
                        			return '';
                        		else
                        			return '<b>Other Designations:</b> '+value.replace(new RegExp(':', 'g'),', ')+'<br />';
                        	},
                        	ins_aliases: function(value) {
                        		if (!value)
                        			return '';
                        		else
                        			return '<b>Aliases:</b> '+value.replace(new RegExp(':', 'g'),', ')+'<br />';
                        	},
                        	check_mim: function(value) {
                        		if (!value)
                        			return '';
                        		else
                        			return '<b>MIM:</b> <a href="http://omim.org/entry/'+value+'">'+value+'</a> <br />';
                        	}
                        }
            )
        };
        
        var functionTab = {
        	title: 'Function',
        	xtype: 'panel',
        	id: 'functionTab',
        	cls: 'fontAdjust',
        	iconCls: 'function',
        	iconMask: true,
        	scrollable: true,
        	styleHtmlContent: true,
        	data: {},
        	tpl: new Ext.XTemplate(
                        '{[this.check(values.gene_summary)]}',
                        {
                        	check: function(value) {
                        		if (!value)
                        			return 'No Function Description Available.';
                        		else
                        			return value;
                        	}
                        }
            )
        };
        
        var referencesTab = {
        	title: 'References',
        	xtype: 'list',
        	id: 'referencesTab',
        	cls: 'fontAdjust',
        	iconCls: 'bookmarks',
        	iconMask: true,
        	scrollable: true,
        	styleHtmlContent: true,
        	emptyText: 'No References Available.',
        	disableSelection: true,
        	store: Ext.getStore("GeneRifStore"),
        	itemTpl: new Ext.XTemplate(
        		'<tpl for=".">',
        			'{rif} [<a href="#" id="{pubmed_id}" class="abClick" onclick="return false;">Abstract</a>]<br/>',
        		'</tpl>'
        	),
        	itemSelector:'a.abClick',
            listeners:{
				'itemtap': function(dataview, index, item, e){
					var el = Ext.get(item.id);
					var id = el.select('a.abClick', true).elements[0].id;
					this.fireEvent("displayAbstract", id, this);
				},
				activate: function(cmp) {
					this.fireEvent("activateRifPaging", this);
				},
				deactivate: function(cmp) {
					this.fireEvent("disableRifPaging", this);
				}
			}
        };
        
        this.add([topToolbar,pagingBar,geneTab,functionTab,referencesTab]);

    },
    
    backToIndex: function () {
		this.fireEvent("indexReturn", this);
    },
    
    backToSearch: function () {
		this.fireEvent("searchReturn", this);
    },
    
    fontUp: function () {
    	var bodySize = parseInt(($("body").css('font-size')).replace("px",""));
    	var panelSize = parseInt(($(".fontAdjust").css('font-size')).replace("px",""));
    	
    	if ((panelSize+1) <= (bodySize+10)) {
    		setCookie('bg_font_scale',(parseInt(getCookie('bg_font_scale'))+1),365);
    		var newSize = adjustPx($(".fontAdjust").css('font-size'),1);
			$(".fontAdjust").css('font-size',newSize);
    	}
    	
    	if ((panelSize+1) == (bodySize+10)) {
			this.fireEvent("fontUp",'disable');
		}
		else {
			this.fireEvent("fontUp",'enable');
		}
    	
    	//console.log("Body Size: "+$("body").css('font-size')+"  Panel Size: "+$(".fontAdjust").css('font-size'));
    },
    
    fontDown: function () {
    	var bodySize = parseInt(($("body").css('font-size')).replace("px",""));
    	var panelSize = parseInt(($(".fontAdjust").css('font-size')).replace("px",""));
    	
    	if ((panelSize-1) >= (bodySize-6)) {
    		setCookie('bg_font_scale',(parseInt(getCookie('bg_font_scale'))-1),365);
    		var newSize = adjustPx($(".fontAdjust").css('font-size'),-1);
			$(".fontAdjust").css('font-size',newSize);
    	}
    	
    	if ((panelSize-1) == (bodySize-6)) {
				this.fireEvent("fontDown",'disable');
		}
		else {
			this.fireEvent("fontDown",'enable');
		}
    	
    	//console.log("Body Size: "+$("body").css('font-size')+"  Panel Size: "+$(".fontAdjust").css('font-size'));
    }
    
});